import React, { useState } from 'react'
import ChineseLoadingAnimation from './ChineseLoadingAnimation'

const InputSection = ({ onSubmit, isLoading }) => {
  const [input, setInput] = useState('')
  const [isTestMode, setIsTestMode] = useState(false)

  const handleSubmit = (e) => {
    e.preventDefault()
    if (input.trim() && !isLoading) {
      onSubmit(input.trim())
    }
  }

  const placeholderTexts = [
    "今日心情如何？请与我分享...",
    "有什么想要倾诉的心事吗？",
    "描述一下您此刻的感受...",
    "让我为您的情绪写一首诗..."
  ]

  const [placeholder] = useState(
    placeholderTexts[Math.floor(Math.random() * placeholderTexts.length)]
  )

  return (
    <section className="animate-slide-up">
      <div className="poem-display">
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* 输入框标题 */}
          <div className="text-center mb-6">
            <h2 className="text-2xl font-semibold text-ink-700 font-chinese mb-2">
              诉说心语
            </h2>
            <p className="text-ink-500 text-sm">
              请在下方的"宣纸"上写下您的心情或想法
            </p>
          </div>

          {/* 主输入区域 */}
          <div className="relative">
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder={placeholder}
              className="ancient-input min-h-[120px] resize-none text-lg leading-relaxed"
              disabled={isLoading}
              maxLength={200}
            />
            
            {/* 字数统计 */}
            <div className="absolute bottom-3 right-3 text-xs text-ink-400">
              {input.length}/200
            </div>
          </div>

          {/* 提交按钮 */}
          <div className="text-center">
            <button
              type="submit"
              disabled={!input.trim() || isLoading}
              className={`ancient-button text-lg px-12 py-4 ${
                (!input.trim() || isLoading) 
                  ? 'opacity-50 cursor-not-allowed transform-none' 
                  : ''
              }`}
            >
              {isLoading ? (
                <span className="flex items-center justify-center space-x-2">
                  <div className="w-4 h-4 border-2 border-ink-600 border-t-transparent rounded-full animate-spin"></div>
                  <span>诗意生成中...</span>
                </span>
              ) : (
                '提交心语'
              )}
            </button>
          </div>

          {/* 使用提示 */}
          <div className="text-center text-xs text-ink-400 space-y-1">
            <p>💡 您可以描述心情、分享感受，或者提出想法</p>
            <p>🎨 AI将为您创作专属的古风诗句</p>
          </div>
        </form>
      </div>

      {/* 3D国风等待动画 */}
      <ChineseLoadingAnimation
        isVisible={isLoading || isTestMode}
        message={isTestMode ? "动画效果演示中..." : "正在为您创作诗意..."}
      />

    </section>
  )
}

export default InputSection
